<template>
	<div class="goumaihuiyuan">
		<div class="goumaihui">
			<ul>
				<li>
					<div class="huiyuantou">
						<img src="../../../../assets/img/mianfei.png" />
						<span>免费版</span>
					</div>
					<div class="huiyuanshen">
						<p>￥<span>0</span></p>
						<p>永久免费</p>
						<p>
							<span>免费体验</span>
						</p>
					</div>
				</li>
				<li>
					<div class="huiyuantou1">
						<img src="../../../../assets/img/yideng.png" />
						<span>高级版</span>
					</div>
					<div class="huiyuanshen1">
						<p>￥<span>399</span><span>/3个月</span><span>限时</span></p>
						<p>
							<span>一个账号</span>
							<span>送深码带货参谋高级版</span>
						</p>
						<p>
							<span>立即开通</span>
						</p>
					</div>
				</li>
				<li>
					<div class="huiyuantou2">
						<img src="../../../../assets/img/erdemg.png" />
						<span>豪华版</span>
					</div>
					<div class="huiyuanshen2">
						<p>￥<span>799</span><span>/3个月</span><span>限时</span></p>
						<p>
							<span>一个账号</span>
							<span>送深码带货参谋高级版</span>
						</p>
						<p>
							<span>立即开通</span>
						</p>
					</div>
				</li>
				<li>
					<div class="huiyuantou3">
						<img src="../../../../assets/img/sandneg.png" />
						<span>专业版</span>
					</div>
					<div class="huiyuanshen3">
						<p>￥<span>1999</span><span>/3个月</span><span>限时</span></p>
						<p>
							<span>一个账号</span>
							<span>送深码带货参谋高级版</span>
						</p>
						<p>
							<span>立即开通</span>
						</p>
					</div>
				</li>
			</ul>
		</div>
		
		<div class="gongnengduibi">
			<div class="ciyunpinpai1">
				<span>功能详细对比</span>
			</div>
			
			<div class="gongnengduibi1">
				<div class="gongnengduibi1_1">
					<p>
						创意洞察
					</p>
					<ul ref="yuansu1">
						<li v-for="(item,index) in 15" :key="index">可查看热门视频<span>{{index+18}}</span>个</li>
					</ul>
					<div class="sandang">
						免费体验
					</div>
				</div>
				<div class="gongnengduibi1_2">
					<p>
						创意洞察
					</p>
					<ul ref="yuansu2">
						<li v-for="(item,index) in 15" :key="index">可查看话题参与达人<span>{{index+100}}</span>个</li>
					</ul>
					<div class="sandang">
						￥399/3个月 立即开通
					</div>
				</div>
				<div class="gongnengduibi1_3">
					<p>
						创意洞察
					</p>
					<ul ref="yuansu3">
						<li v-for="(item,index) in 15" :key="index">可查看热门挑战赛<span>{{index+30}}</span>个</li>
					</ul>
					<div class="sandang">
						￥799/3个月 立即开通
					</div>
				</div>
				<div class="gongnengduibi1_4">
					<p>
						创意洞察
					</p>
					<ul ref="yuansu4">
						<li v-for="(item,index) in 15" :key="index">可查看音乐视频<span>{{index+20}}</span>个</li>
					</ul>
					<div class="sandang">
						￥1999/3个月 立即开通
					</div>
				</div>
			</div>
			
			<!-- <div class="sigou">
				<ul>
					<li>免费体验</li>
					<li>￥399/3个月 立即开通</li>
					<li>￥799/3个月 立即开通</li>
					<li>￥1999/3个月 立即开通</li>
				</ul>
			</div> -->
			
			<div class="dingzhijie">
				<p>定制功能</p>
				<ul>
					<li>可定制功能</li>
					<li>可定制接口</li>
					<li>可定制数据导出</li>
				</ul>
			</div>
		
			<div class="ciyunpinpai2">
				<span>常见问题</span>
			</div>
			
			<div class="wenti">
				<div class="wenti1">
					<p>Q: 可以开具发票吗？</p>
					<p>A : 可开具电子版增税普通发票。如需开票，请添加客服微信：caasdata2020。</p>
				</div>
				<div class="wenti1">
					<p>Q: 除了微信支付，是否可以网银转账支付？</p>
					<p>A : 如果不能微信支付，可通过网银转账进行支付，请添加客服微信：caasdate2020，客服会将对公账号信息发送给您。转账完成过后，将为您开通账号。 </p>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:"goumaihuiyuan",
		data(){
			return{
				clientHeight:'',//可是区域高度
			}
		},
		mounted() {
			//动态获取可视区域高度
			this.clientHeight=document.documentElement.clientHeight;
			// this.clientHeight = `${document.documentElement.clientHeight}`
			this.$refs.yuansu1.style.height = this.clientHeight/2 + 'px'; //动态设置HTML元素高度
			this.$refs.yuansu2.style.height = this.clientHeight/2 + 'px'; //动态设置HTML元素高度
			this.$refs.yuansu3.style.height = this.clientHeight/2 + 'px'; //动态设置HTML元素高度
			this.$refs.yuansu4.style.height = this.clientHeight/2 + 'px'; //动态设置HTML元素高度
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.goumaihuiyuan{
		
		@keyframes jello-horizontal {
		  0% {
		    transform: scale3d(1, 1, 1);
		  }
		  30% {
		    transform: scale3d(1.1, 0.94, 1);
		  }
		  40% {
		    transform: scale3d(0.94, 1.1, 1);
		  }
		  50% {
		    transform: scale3d(1.05, 0.95, 1);
		  }
		  65% {
		    transform: scale3d(0.95, 1.05, 1);
		  }
		  75% {
		    transform: scale3d(1.05, 0.95, 1);
		  }
		  100% {
		    transform: scale3d(1, 1, 1);
		  }
		}
		
		.goumaihui{
			background-color: #fff;
			padding: 1rem 0;
			
			ul{
				width: 98%;
				list-style: none;
				display: flex;
				justify-content: space-around;
				align-items: center;
				text-align: center;
				padding: 0 0.4rem;
				
				li{
					border-radius:0.1rem ;
					width: 22%;
					box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.3);
				}
				li:hover{
					animation: jello-horizontal 0.9s both;
				}
				li:nth-of-type(1){
					.huiyuantou{
						background-color: #9EC824;
						border-top-left-radius:0.1rem ;
						border-top-right-radius:0.1rem ;
						padding: 2rem 0;
						
						img{
							width: 0.85rem;
							vertical-align: middle;
						}
						span{
							color: #fff;
							font-size: 0.8rem;
							margin-left:0.1rem ;
						}
					}
					
					.huiyuanshen{
						padding: 1rem;
						
						p:nth-of-type(1){
							color: #0091FF;
							font-size: 0.7rem;
							
							span{
								font-size: 1.3rem;
							}
						}
						p:nth-of-type(2){
							margin: 1.37rem 0 1.85rem 0;
							color: #555555;
							font-size: 0.6rem;
						}
						p:nth-of-type(3){
							span{
								cursor: pointer;
								color: #fff;
								background-color: #0091FF;
								padding: 0.1rem 0.3rem;
								border-radius:0.05rem ;
								margin: auto;
								display: inline;
								font-size: 0.4rem;
								width: 30%;
							}
						}
					}
				}
				
				li:nth-of-type(2){
					.huiyuantou1{
						background-color: #0B87DE;
						border-top-left-radius:0.1rem ;
						border-top-right-radius:0.1rem ;
						padding: 2rem 0;
						
						img{
							width: 0.7rem;
							vertical-align: middle;
						}
						span{
							color: #fff;
							font-size: 0.8rem;
							margin-left:0.1rem ;
						}
					}
					
					.huiyuanshen1{
						padding: 1rem;
						
						p:nth-of-type(1){
							color: #0091FF;
							font-size: 0.7rem;
							position: relative;
							
							span:nth-of-type(1){
								font-size: 1.3rem;
							}
							span:nth-of-type(2){
								font-size: 0.6rem;
							}
							span:nth-of-type(3){
								position: absolute;
								top: -0.2rem;
								right: 0.4rem;
								color: #fff;
								padding: 0.05rem 0.3rem;
								height: 0.6rem;
								line-height: 0.6rem;
								font-size: 0.35rem;
								border-radius:0.4rem ;
								background-color: #0091FF;
							}
							span:nth-of-type(3)::after{
								position: absolute;
								left: 0.1rem;
								bottom: -0.2rem;
								content: "";
								display: block;
								border-left:0.1rem solid transparent ;
								border-right:0.2rem solid transparent ;
								border-top:0.3rem solid #0091FF;
								transform: rotate(12deg);
							}
						}
						p:nth-of-type(2){
							margin: 1rem 0 1.5rem 0;
							
							span:nth-of-type(1){
								color: #555555;
								font-size: 0.4rem;
								display: block;
							}
							span:nth-of-type(2){
								color: #0091FF;
								font-size: 0.45rem;
								display: block;
								margin-top:0.4rem ;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							
						}
						p:nth-of-type(3){
							span{
								cursor: pointer;
								color: #fff;
								background-color: #0091FF;
								padding: 0.1rem 0.3rem;
								border-radius:0.05rem ;
								margin: auto;
								display: inline;
								font-size: 0.4rem;
								width: 30%;
							}
						}
					}
				}
				
				li:nth-of-type(3){
					.huiyuantou2{
						background-color: #FF9D03;
						border-top-left-radius:0.1rem ;
						border-top-right-radius:0.1rem ;
						padding: 2rem 0;
						
						img{
							width: 0.85rem;
							vertical-align: middle;
						}
						span{
							color: #fff;
							font-size: 0.8rem;
							margin-left:0.1rem ;
						}
					}
					
					.huiyuanshen2{
						padding: 1rem;
						
						p:nth-of-type(1){
							color: #0091FF;
							font-size: 0.7rem;
							position: relative;
							
							span:nth-of-type(1){
								font-size: 1.3rem;
							}
							span:nth-of-type(2){
								font-size: 0.6rem;
							}
							span:nth-of-type(3){
								position: absolute;
								top: -0.2rem;
								right: 0.4rem;
								color: #fff;
								padding: 0.05rem 0.3rem;
								height: 0.6rem;
								line-height: 0.6rem;
								font-size: 0.35rem;
								border-radius:0.4rem ;
								background-color: #0091FF;
							}
							span:nth-of-type(3)::after{
								position: absolute;
								left: 0.1rem;
								bottom: -0.2rem;
								content: "";
								display: block;
								border-left:0.1rem solid transparent ;
								border-right:0.2rem solid transparent ;
								border-top:0.3rem solid #0091FF;
								transform: rotate(12deg);
							}
						}
						p:nth-of-type(2){
							margin: 1rem 0 1.5rem 0;
							
							span:nth-of-type(1){
								color: #555555;
								font-size: 0.4rem;
								display: block;
							}
							span:nth-of-type(2){
								color: #0091FF;
								font-size: 0.45rem;
								display: block;
								margin-top:0.4rem ;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							
						}
						p:nth-of-type(3){
							span{
								cursor: pointer;
								color: #fff;
								background-color: #0091FF;
								padding: 0.1rem 0.3rem;
								border-radius:0.05rem ;
								margin: auto;
								display: inline;
								font-size: 0.4rem;
								width: 30%;
							}
						}
					}
				}
			
				li:nth-of-type(4){
					.huiyuantou3{
						background-color: #7147A0;
						border-top-left-radius:0.1rem ;
						border-top-right-radius:0.1rem ;
						padding: 2rem 0;
						
						img{
							width: 0.7rem;
							vertical-align: middle;
						}
						span{
							color: #fff;
							font-size: 0.8rem;
							margin-left:0.1rem ;
						}
					}
					
					.huiyuanshen3{
						padding: 1rem;
						
						p:nth-of-type(1){
							color: #0091FF;
							font-size: 0.7rem;
							position: relative;
							
							span:nth-of-type(1){
								font-size: 1.3rem;
							}
							span:nth-of-type(2){
								font-size: 0.6rem;
							}
							span:nth-of-type(3){
								position: absolute;
								top: -0.2rem;
								right: 0.4rem;
								color: #fff;
								padding: 0.05rem 0.3rem;
								height: 0.6rem;
								line-height: 0.6rem;
								font-size: 0.35rem;
								border-radius:0.4rem ;
								background-color: #0091FF;
							}
							span:nth-of-type(3)::after{
								position: absolute;
								left: 0.1rem;
								bottom: -0.2rem;
								content: "";
								display: block;
								border-left:0.1rem solid transparent ;
								border-right:0.2rem solid transparent ;
								border-top:0.3rem solid #0091FF;
								transform: rotate(12deg);
							}
						}
						p:nth-of-type(2){
							margin: 1rem 0 1.5rem 0;
							position: relative;
							
							span:nth-of-type(1){
								color: #555555;
								font-size: 0.4rem;
								display: block;
							}
							span:nth-of-type(2){
								color: #0091FF;
								font-size: 0.45rem;
								display: block;
								margin-top:0.4rem ;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							span:nth-of-type(2)::after{
								content: "可定制功能，数据服务";
								position: absolute;
								display: block;
								left: 1.1rem;
								bottom: -1.1rem;
								color: #FF8860;
								font-size: 0.45rem;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							
						}
						p:nth-of-type(3){
							span{
								cursor: pointer;
								color: #fff;
								background-color: #0091FF;
								padding: 0.1rem 0.3rem;
								border-radius:0.05rem ;
								margin: auto;
								display: inline;
								font-size: 0.4rem;
								width: 30%;
							}
						}
					}
				}
			}
		}
		
		.gongnengduibi{
			background-color: #fff;
			padding: 0 1.1rem;
			.ciyunpinpai1{
				padding: 1rem 0 1.5rem 0;
				box-sizing: border-box;
				position: relative;
				
				span{
					font-size: 0.8rem;
					display: block;
					margin-left:0.8rem ;
					color: #333333;
					letter-spacing: 0.05rem;
				}
				
				span::before{
					content: "";
					display: block;
					position: absolute;
					left: 0;
					width: 0.3rem;
					height: 1rem;
					background-color: #0091FF;
				}
			}
			
			.gongnengduibi1{
				display: flex;
				justify-content: space-around;
				padding: 0 0.4rem;
				
				.gongnengduibi1_1{
					width: 22%;
					
					p{
						color: #0091FF;
						font-size: 0.5rem;
						margin-bottom:1rem ;
					}
					ul{
						list-style: none;
						overflow: auto;
						margin-bottom:0.8rem ;
						
						li{
							color: #333333;
							margin: 0.6rem 0;
							font-size: 0.4rem;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
							
							span{
								color: #0091FF;
							}
						}
					}
					ul::-webkit-scrollbar{
						display: none;
					}
					.sandang{
						display: inline;
						background-color: #0091FF;
						color: #fff;
						font-size: 0.4rem;
						padding: 0.3rem 0.6rem;
						cursor: pointer;
						border-radius:0.1rem ;
					}
				}
				.gongnengduibi1_2{
					width: 22%;
					
					p{
						color: #0091FF;
						font-size: 0.5rem;
						margin-bottom:1rem ;
					}
					ul{
						list-style: none;
						overflow: auto;
						margin-bottom:0.8rem ;
						
						li{
							color: #333333;
							margin: 0.6rem 0;
							font-size: 0.4rem;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
							
							span{
								color: #0091FF;
							}
						}
					}
					ul::-webkit-scrollbar{
						display: none;
					}
					.sandang{
						display: inline;
						background-color: #0091FF;
						color: #fff;
						font-size: 0.4rem;
						padding: 0.3rem 0.6rem;
						cursor: pointer;
						border-radius:0.1rem ;
					}
				}
				.gongnengduibi1_3{
					width: 22%;
					
					p{
						color: #0091FF;
						font-size: 0.5rem;
						margin-bottom:1rem ;
					}
					ul{
						list-style: none;
						overflow: auto;
						margin-bottom:0.8rem ;
						
						li{
							color: #333333;
							margin: 0.6rem 0;
							font-size: 0.4rem;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
							
							span{
								color: #0091FF;
							}
						}
					}
					ul::-webkit-scrollbar{
						display: none;
					}
					.sandang{
						display: inline;
						background-color: #0091FF;
						color: #fff;
						font-size: 0.4rem;
						padding: 0.3rem 0.6rem;
						cursor: pointer;
						border-radius:0.1rem ;
					}
				}
				.gongnengduibi1_4{
					width: 22%;
					
					p{
						color: #0091FF;
						font-size: 0.5rem;
						margin-bottom:1rem ;
					}
					ul{
						list-style: none;
						overflow: auto;
						margin-bottom:0.8rem ;
						
						li{
							color: #333333;
							margin: 0.6rem 0;
							font-size: 0.4rem;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
							
							span{
								color: #0091FF;
							}
						}
					}
					ul::-webkit-scrollbar{
						display: none;
					}
					.sandang{
						display: inline;
						background-color: #0091FF;
						color: #fff;
						font-size: 0.4rem;
						padding: 0.3rem 0.6rem;
						cursor: pointer;
						border-radius:0.1rem ;
					}
				}
			}
			
			.sigou{
				margin-top:1.5rem ;
				ul{
					list-style: none;
					display: flex;
					justify-content: space-between;
					align-items: center;
					text-align: center;
					li{
						background-color: #0091FF;
						display: inline;
						color: #fff;
						font-size: 0.4rem;
						// width: 6rem;
						padding: 0.3rem 0.6rem;
						cursor: pointer;
						border-radius:0.1rem ;
					}
				}
			}
			
			.dingzhijie{
				background-color: #0091FF;
				padding: 1rem 1.8rem;
				border-radius:0.1rem ;
				margin-top:1.5rem ;
				margin-bottom:0.4rem ;
				filter: drop-shadow(0 0.1rem 0.1rem rgba(0,0,0,0.3));
				// background: linear-gradient(90deg,transparent 1%,#0091ff 30%,#0091ff 50%,#0091ff 65%,#0091ff 68%,transparent 90%);
		
				
				p{
					color: #fff;
					font-size: 0.6rem;
					margin-bottom:0.8rem ;
				}
				ul{
					list-style: none;
					
					li{
						float: left;
						color: #fff;
						font-size: 0.45rem;
						margin-right:3rem ;
					}
				}
				ul::after{
					content: "";
					display: block;
					clear: both;
				}
			}
		
			.ciyunpinpai2{
				padding: 1rem 0 0.6rem 0;
				box-sizing: border-box;
				position: relative;
				border-bottom:1px solid #E7E7E7 ;
				
				span{
					font-size: 0.8rem;
					display: block;
					margin-left:0.8rem ;
					color: #333333;
					letter-spacing: 0.05rem;
				}
				
				span::before{
					content: "";
					display: block;
					position: absolute;
					left: 0;
					width: 0.3rem;
					height: 1rem;
					background-color: #0091FF;
				}
			}
			
			.wenti{
				
				.wenti1{
					margin: 0.8rem 0 1.4rem 0;
					p:nth-of-type(1){
						color: #333333;
						font-size: 0.45rem;
					}
					p:nth-of-type(2){
						color: #999999;
						font-size: 0.4rem;
						margin-top:0.6rem ;
					}
				}
			}
		}
	}
</style>
